<template>
	<view class="body">
		<view class="page-title">今天</view>
		<view class="card-wrap" style="display: flex;">
			<view class="ring-wrap">
				<qiun-data-charts
					type="ring"
					:opts="ringOpts"
					:chartData="ringChartData"
					:canvas2d="false"
					canvasId="ringChartId"
				/>
			</view>
			<view class="sleep-wrap">
				<view class="">
					<text class="font-26" style="color: #9FA2B4;">当前睡姿</text>
					<view class="font-32 margin-top-6" style="color: #1E2531; font-weight: bold;">{{ sleepInfoData.mainSleep }}</view>
				</view>
				<view class=" margin-top-24">
					<text class="font-26" style="color: #9FA2B4;">主要睡姿</text>
					<view class="font-32 margin-top-6" style="color: #1E2531; font-weight: bold;">{{ sleepInfoData.todaySleep }}</view>
				</view>
			</view>
		</view>
		<view class="page-card margin-top-20">
			<view class="card-title">呼吸率趋势图</view>
			<view class="flex justify-between margin-top-30" style="padding: 0 16rpx;">
				<view class="flex">
					<text style="font-size: 25rpx;color: #9FA2B4;">呼吸率</text>
					<text style="font-size: 26rpx;color: #1E2531;margin-left: 30rpx;">{{ sleepInfoData.respiratoryRate }}</text>
				</view>
				<view class="flex">
					<text style="font-size: 25rpx;color: #9FA2B4;">呼吸暂停指数</text>
					<text style="font-size: 26rpx;color: #1E2531;margin-left: 30rpx;">{{ sleepInfoData.respiratoryPauseIndex }} {{ sleepInfoData.respiratoryPauseIndexInfo }}</text>
				</view>
			</view>
			<view class="column-wrap" style="height: 600rpx;">
				<qiun-data-charts
					type="column"
					:opts="columnOpts"
					:chartData="columnChartData"
					:canvas2d="false"
					canvasId="columnChartId"
				/>
			</view>
		</view>
		<view class="page-card margin-top-20 margin-bottom-32">
			<view class="card-title">呼吸事件趋势图</view>
			<view class="flex justify-between margin-top-30" style="padding: 0 16rpx;">
				<view class="flex">
					<text style="font-size: 25rpx;color: #9FA2B4;">总呼吸暂停时间</text>
					<text style="font-size: 26rpx;color: #1E2531;margin-left: 30rpx;">{{ sleepInfoData.totalRespiratoryPauseTime }}</text>
				</view>
				<view class="flex">
					<text style="font-size: 25rpx;color: #9FA2B4;">平均暂停时间</text>
					<text style="font-size: 26rpx;color: #1E2531;margin-left: 30rpx;">{{ sleepInfoData.avgRespiratoryPauseTime }}</text>
				</view>
			</view>
			<view class="flex justify-between margin-top-14" style="padding: 0 16rpx;">
				<view class="flex">
					<text style="font-size: 25rpx;color: #9FA2B4;">最长呼吸暂停时间</text>
					<text style="font-size: 26rpx;color: #1E2531;margin-left: 30rpx;">{{ sleepInfoData.maxRespiratoryPauseTime }}</text>
				</view>
				<view class="flex">
					<text style="font-size: 25rpx;color: #9FA2B4;">该事件发生于</text>
					<text style="font-size: 26rpx;color: #1E2531;margin-left: 30rpx;">{{ sleepInfoData.eventPauseTime }}</text>
				</view>
			</view>
			<view class="column-wrap" style="height: 600rpx;">
				<qiun-data-charts
					type="column"
					:opts="columnTwoOpts"
					:chartData="columnTwoChartData"
					:canvas2d="false"
					canvasId="columnTwoChartId"
				/>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		deviceSn: String

	},
	data() {
		return {
			sleepInfoData: {},
			ringChartData: {},
			ringOpts: {
				rotate: false,
				rotateLock: false,
				color: ['#1890FF', '#91CB74', '#FAC858'],
				padding: [5, 5, 5, 5],
				dataLabel: true,
				enableScroll: false,
				legend: {
					show: true,
					position: 'bottom',
					lineHeight: 25
				},
				extra: {
					ring: {
						ringWidth: 40,
						activeOpacity: 0.5,
						activeRadius: 10,
						offsetAngle: 0,
						labelWidth: 15,
						border: false,
						borderWidth: 30,
						borderColor: '#FFFFFF',
						centerColor: '#FFFFFF'
					}
				}
			},
			// 第一个柱状图
			columnChartData: {},
			columnOpts: {
				color: ['#417CE9', '#ECECEC', '#4FCB93', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
				padding: [25, 15, 0, 5],
				enableScroll: false,
				legend: {},
				xAxis: {
					disableGrid: true
				},
				yAxis: {
					gridColor: 'rgba(112, 112, 112, 0.15)',
					gridType: 'dash',
					data: [
						{
							min: 0,
							axisLine: false
						}
					]
				},
				extra: {
					column: {
						type: 'group',
						width: 30,
						activeBgColor: '#000000',
						activeBgOpacity: 0.08
					}
				}
			},
			// 第二个柱状图
			columnTwoChartData: {},
			columnTwoOpts: {
				color: ['#417CE9', '#ECECEC', '#4FCB93', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
				padding: [25, 15, 0, 5],
				enableScroll: false,
				legend: {},
				xAxis: {
					disableGrid: true
				},
				yAxis: {
					gridColor: 'rgba(112, 112, 112, 0.15)',
					gridType: 'dash',
					padding: 0,
					data: [
						{
							min: 0,
							axisLine: false
						}
					]
				},
				extra: {
					column: {
						type: 'group',
						width: 30,
						activeBgColor: '#000000',
						activeBgOpacity: 0.08
					}
				}
			}
		};
	},
	mounted() {
		this.getSleepInfoData();
	},
	methods: {
		// 获取跌倒详情
		async getSleepInfoData() {
			const params = {
				deviceSn: this.deviceSn
			};
			const [err, result] = await this.$to(uni.$u.http.post('/jeecg-boot/api/v1-public/mini-program-datacenter/sleepIndexInfo', params));
			if (err) return;
			this.sleepInfoData = {
				mainSleep: result.mainSleep,
				respiratoryPauseIndex: result.respiratoryPauseIndex,
				respiratoryPauseIndexInfo: result.respiratoryPauseIndexInfo,
				respiratoryRate: result.respiratoryRate,
				todaySleep: result.todaySleep,
				totalRespiratoryPauseTime: result.totalRespiratoryPauseTime,
				avgRespiratoryPauseTime: result.avgRespiratoryPauseTime,
				maxRespiratoryPauseTime: result.maxRespiratoryPauseTime,
				eventPauseTime: result.eventPauseTime
			};
			// 今天
			const sleepChart = {
				series: [
					{
						data: []
					}
				]
			};
			result.sleepChart.forEach((item) => {
				const obj = {
					name: '',
					value: ''
				};
				for (const key in item) {
					obj.name = key;
					obj.value = Number(item[key]);
				}
				sleepChart.series[0].data.push(obj);
			});
			this.ringChartData = JSON.parse(JSON.stringify(sleepChart));
			// 呼吸率
			const respiratoryRateChat = {
				categories: [],
				series: [
					{
						name: '≥20',
						data: []
					},
					{
						name: '12~20',
						data: [18, 27, 21]
					},
					{
						name: '≤12',
						data: [18, 23, 22]
					}
				]
			};
			result.respiratoryRateChat.forEach((item) => {
				respiratoryRateChat.categories.push(item.time);
				respiratoryRateChat.series[0].data.push(Number(item.count));
			});
			this.columnChartData = JSON.parse(JSON.stringify(respiratoryRateChat));
			// 呼吸事件
			const respiratoryEventsChat = {
				categories: [],
				series: [
					{
						name: '≥20',
						data: []
					},
					{
						name: '12~20',
						data: [18, 27, 21]
					},
					{
						name: '≤12',
						data: [18, 16, 2]
					}
				]
			};
			result.respiratoryEventsChat.forEach((item) => {
				respiratoryEventsChat.categories.push(item.time);
				respiratoryEventsChat.series[0].data.push(Number(item.count));
			});
			this.columnTwoChartData = JSON.parse(JSON.stringify(respiratoryEventsChat));
		}
	}
};
</script>

<style lang="scss" scoped>
.body {
	height: 100%;
	overflow: auto;
}
.page-title {
	line-height: 80rpx;
	color: #1E2531;
	font-weight: bold;
	font-size: 30rpx;
}

.card-wrap {
	padding: 24rpx 30rpx 24rpx 0;
	border-radius: 30rpx;
	background-color: #fff;
	.ring-wrap {
		height: 500rpx;
		width: 500rpx;
		position: relative;
	}
	.sleep-wrap {
		flex: 1;
		margin-top: 60rpx;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}
}
.page-card {
	padding: 36rpx 22rpx 10rpx;
	border-radius: 30rpx;
	background-color: #fff;
	.card-title {
		color: #1E2531;
		font-size: 32rpx;
		font-weight: bold;
	}
}
</style>
